<template>
  <div class="login">
    <Header class="my-header">
      <p><b>大粮宝</b></p>
    </Header>
    <Content>
      <div class="my-login">
        <Row>
          <i-col span="12"
                 class="logo">
            <img src="../../assets/logo.png"
                 alt="">
          </i-col>
          <i-col span="12"
                 class="login-right">
            <div class="ipt">
              <div class="user">
                <img src="../../assets/login/ico_sj.png"
                     alt="">
                <span>|</span>
                <input type="text"
                       placeholder="请输入您的手机号,或统一信用社会代码"
                       v-model="phone">
              </div>
              <div class="pwd">
                <img src="../../assets/login/ico_yzm.png"
                     alt="">
                <span>|</span>
                <input type="text"
                       placeholder="请输入您的验证码"
                       v-model="verCode">
                <input type="text"
                       class="time"
                       placeholder="获取验证码"
                       @click='myFunction'
                       v-model="verCodeValue">
              </div>
              <div class="login-botton">
                <Row>
                  <i-col span="6">
                    <router-link to="/login"
                                 class="my-fontcolor">用户名登录</router-link>
                  </i-col>
                  <i-col span="5"
                         offset="13">
                    <router-link to="/forget"
                                 class="my-fontcolor">忘记密码</router-link>
                  </i-col>
                </Row>
              </div>
              <button @click="login"><b>登录</b></button>
            </div>
          </i-col>
        </Row>
      </div>
    </Content>
  </div>
</template>

<script>
export default {
  name: 'verificationCodelogin',
  data () {
    return {
      wait: 60,
      phone: '',
      verCode: '',
      userClient: 1,
      verCodeValue: ''
    }
  },
  methods: {
    myFunction (e) {
      this.myTime(e)
      this.code()
    },
    myTime (e) {
      var btn = e.target
      if (this.wait == 1) {
        btn.removeAttribute('disabled')
        this.wait = 60
        this.verCodeValue = '获取验证码'
        console.log(this.wait)
      } else {
        btn.setAttribute('disabled', true)
        this.verCodeValue = this.wait + 'S重新发送'
        this.wait--
        setTimeout(() => { this.myTime(e) }, 1000)
      }
    },
    code () {
      console.log(this.phone)
      this.axios({
        method: 'get',
        url: 'http://47.93.49.254:8040/dl-userservice/external/getCode',
        params: { phone: this.phone }
      }).then((result) => {
        console.log(result.data.message)
      }).catch((error) => {
        console.log(error)
      })
    },
    login () {
      // 判断验证码是否正确
      // 判断是手机还是企业账号
      // console.log(data)
      var data = this.qs.stringify({
        accountPhone: this.phone,
        code: this.verCode
      })
      console.log(data)
      this.axios({
        method: 'post',
        url: 'http://47.93.49.254:8040/dl-userservice/external/verifyCode',
        data: data
      }).then((result) => {
        console.log(result)
        // if(result.data.statusCode == 1){
        //     alert("验证码错误");
        // }
      }).then(() => {
        // 如果正确进行登录判断
        var data = this.qs.stringify({
          accountPhone: this.phone,
          code: this.verCode,
          userClient: this.userClient
        })
        this.axios({
          method: 'post',
          url: 'http://47.93.49.254:8040/dl-userservice/external/phoneLogin',
          data: data
        }).then((result) => {
          console.log(result)
          // 判断是否登录成功
          if (result.data.statusCode == 0) {
            localStorage.setItem('usertoken', result.data.message)
            // 为路由守卫设置值，供路由守卫判断
            localStorage.setItem('dlb', true)
            this.$router.push({
              path: '/index'
            })
          } else {
            localStorage.setItem('dlb', false)
            this.$router.push({
              path: '/login'
            })
          }
        })
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}

</script>

<style lang="less" scoped>
.login {
  width: 1920px;
  height: 1080px;
  position: relative;
  background: url(../../assets/background.png);
  .my-header {
    background: 0;
    height: 59px;
    width: 100%;
    border-bottom: 1px solid #747696;
    border-top: 1px solid #272a5c;
    p {
      color: #fff;
      font-size: 20px;
      margin-left: 330px;
      width: 100px;
      height: 59px;
      line-height: 59px;
      box-sizing: border-box;
    }
  }
  .my-login {
    width: 1040px;
    height: 456px;
    border-radius: 7px;
    box-shadow: 0px 0px 8px 5px #0b1349;
    position: absolute;
    top: 26%;
    left: 22%;
    .login-right {
      .register {
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: #dfe8fa;
        font-size: 16px;
      }
      background: #fff;
      height: 456px;
      .ipt {
        margin-left: 92px;
        margin-top: 80px;
        margin-bottom: 46px;
        height: 270px;
        width: 336px;
        /*border:1px solid #eee;*/
        box-sizing: border-box;
        .user,
        .pwd {
          height: 65px;
          line-height: 65px;
          border-bottom: 1px solid #999999;
          margin-bottom: 12px;
          position: relative;
          .time {
            position: absolute;
            height: 30px;
            width: 90px;
            text-align: center;
            box-sizing: border-box;
            /*padding-left: 8px;*/
            /*border:1px solid red;*/
            top: 15px;
            background: #eeeeee;
            color: #999999;
            left: 230px;
          }
          span {
            margin-right: 10px;
            color: #ededed;
          }
          img {
            margin-left: 10px;
            margin-right: 10px;
          }
          input {
            border: 0;
            height: 64px;
            width: 275px;
            outline: none;
          }
        }
        .login-botton {
          margin-top: 26px;
          margin-bottom: 40px;
          color: #0084ff;
        }
        button {
          height: 50px;
          width: 336px;
          background: #0084ff;
          border: 0;
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
.my-fontcolor {
  color: #0084ff;
}
</style>
